<template>
  <el-affix>
    <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        router>
      <el-menu-item index="/main">U S</el-menu-item>
      <el-menu-item index="/article">文章</el-menu-item>
      <el-menu-item index="/mall">商城</el-menu-item>
      <el-menu-item index="/activity">活动</el-menu-item>
      <el-menu-item index="/community">社区</el-menu-item>

      <search class="search" :width="'40%'" :has-btn="false"></search>

      <el-sub-menu index="/" v-if="profile.isLogin">
        <template #title>
          <img class="head-icon" :src="headIcon" alt="">
        </template>
          <el-menu-item index="/profile">我的</el-menu-item>
          <el-menu-item index="/" @click="logout">退出登录</el-menu-item>
      </el-sub-menu>
      <el-menu-item v-else index="/login">去登陆</el-menu-item>

    </el-menu>
    <div class="line"></div>
  </el-affix>
</template>

<script lang="ts">
import {defineComponent, onUpdated, reactive, ref} from 'vue'
import Search from "@/components/search/Search.vue";
import {GET, POST} from "@/api";
import {ElMessage} from "element-plus";
import {useStore} from "vuex";


export default defineComponent({
  components: {
    Search
  },
  setup() {
    const store = useStore()
    const activeIndex = ref('1')
    const activeIndex2 = ref('1')
    const user = JSON.parse(localStorage.getItem("user") || "{}")
    const headIcon = ref(JSON.parse(localStorage.getItem("user") || "{}").headIcon)
    const handleSelect = (key: string, keyPath: string) => {

    }

    const menuList = reactive([{
      title: "文章",
      link: "/article",
      innerList: [{
        title: "更多",
        link: "/more"
      }, {
        title: "还有",
        link: "/than"
      }]
    }, {
      title: "创作",
      link: "",
      innerList: [{
        title: "更多",
        link: "/more"
      }, {
        title: "还有",
        link: "/than"
      }]
    }])

    const logout = () => {
      POST("/User/UserLogout", user).then(
      res => {
        if (res.status === 200) {
          ElMessage.success("退出登录成功")
          store.dispatch("removeInfo")
        }

      }).catch(err => {
        console.log(err)
      })
    }

    onUpdated(() => {
      GET("/test", {}).then(res => {
          profile.isLogin = res.status === 200;
          headIcon.value = JSON.parse(localStorage.getItem("user") || "{}").headIcon
      }).catch(err => {
          profile.isLogin = false
      })
    })

    // TODO 当用户没有登陆时，该页面显示的为登录
    const profile = reactive({
      isLogin: localStorage.getItem("user") != null,
      title: "我的",
      link: "/profile"
    })

    return {
      activeIndex,
      activeIndex2,
      handleSelect,
      menuList,
      profile,
      logout,
      headIcon
    }
  },
})
</script>

<style lang="scss" scoped>
.search {
  padding: 0 20px;
  background-color: #fff;
  margin-top: 8px;
}

.head-icon {
  width: 40px;
  border-radius: 50%;
}

.el-menu-demo {
  //margin: 0 100px;
}
</style>
